<script setup lang="ts">
import pageHeader from "./components/pageHeader.vue";
import cardHeader from "./components/card_header.vue";
import {onBeforeMount, reactive, ref} from "vue";
import baseService from "@/service/baseService";
import showDialog from "./components/show_dialog.vue";

let arr = ["chengliEmployment", "chengliMarket", "chengliStyle"];
const dataArr = reactive({}) as any;

const showDialogRef = ref();

const showDia = (texts: string) => {
  showDialogRef.value.acceptParams({text: texts});
}

const getDataList = () => {
  baseService
    .get("/bus/busnotice/page", {
      page: 1,
      limit: 1,
      type: "chengliCulture",
      textType: 0,
      isPublish: 1
    })
    .then((res) => {
      dataArr["chengliCulture"] = res.data.list;
    });
  baseService
    .get("/bus/busnotice/page", {
      page: 1,
      limit: 1,
      type: "chengliAttractInvestment",
      textType: 3,
      isPublish: 1
    })
    .then((res) => {
      dataArr["chengliAttractInvestment"] = res.data.list;
    });
  for (let i = 0; i < arr.length; i++) {
    baseService
      .get("/bus/busnotice/page", {
        page: 1,
        limit: 10,
        type: arr[i],
        textType: 3,
        isPublish: 1
      })
      .then((res) => {
        dataArr[arr[i]] = res.data.list;
        if (i === 1) {
          dataArr[arr[i]] = [];
          let chunk = 2;
          for (let ii = 0, j = res.data.list.length; ii < j; ii += chunk) {
            dataArr[arr[i]].push(res.data.list.slice(ii, ii + chunk))
          }
        }
      });
  }
};

const getImageList = (str: string, num: number) => {
  return dataArr[str].map((item: any) => "https://" + item.image).slice(0, num);
};

onBeforeMount(() => {
  getDataList();
});
</script>

<template>
  <!--一塍千延-->
  <div class="mod-out-home">
    <pageHeader></pageHeader>
    <div class="max_screen_body">
      <div class="gather_home_top_box">
        <div class="gather_home_top_left_box">
          <card-header :title="'塍里风貌'" :path="'screen/card_header5.png'"></card-header>
          <div class="gather_home_top_left_body gather_home_top_body">
            <el-carousel indicator-position="none" arrow="never" :interval="6000" v-if="dataArr['chengliStyle']">
              <el-carousel-item v-for="(item, index) in dataArr['chengliStyle']" :key="item.id">
                <div class="imageBox">
                  <el-image class="home_box_item_carousel_img" :src="'https://' + item.image"
                            style="width: 100%; height: 100%" preview-teleported
                            :preview-src-list="getImageList('chengliStyle', 10)" :initial-index="index" :interval="5000"
                            fit="cover"/>
                </div>
                <div class="img_desc">{{ item.title }}</div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
        <div class="gather_home_top_right_box">
          <card-header :title="'塍里文化'" :path="'screen/card_header5.png'"></card-header>
          <div class="gather_home_top_right_body gather_home_top_body">
            <div style="display: flex;height: 100%;" v-if="dataArr['chengliCulture']">
              <div class="div_left">
                <el-image :src="'https://' + dataArr['chengliCulture'][0].image" style="width: 100%;height: 100%;"
                          :preview-src-list="['https://' + dataArr['chengliCulture'][0].image]" fit="cover"></el-image>
              </div>
              <div class="div_right" v-scroll @click="showDia(dataArr['chengliCulture'][0].textContent)">
                <div v-html="dataArr['chengliCulture'][0].textContent"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="gather_home_bottom_box">
        <div class="gather_home_top_left_box">
          <card-header :title="'招商引资'" :path="'screen/card_header3.png'"></card-header>
          <div class="card-body">
            <div style="display: flex;height: 100%;" v-if="dataArr['chengliAttractInvestment']">
              <div class="div_left" style="width: 15vw;">
                <el-image :src="'https://' + dataArr['chengliAttractInvestment'][0].image"
                          style="width: 100%;height: 100%;"
                          :preview-src-list="['https://' + dataArr['chengliAttractInvestment'][0].image]"
                          fit="cover"></el-image>
              </div>
              <div class="div_right" v-scroll @click="showDia(dataArr['chengliAttractInvestment'][0].textContent)">
                <div v-html="dataArr['chengliAttractInvestment'][0].description"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="gather_home_top_center_box">
          <card-header :title="'塍里用工'" :path="'screen/card_header3.png'"></card-header>
          <div class="card-body">
            <div class="gather_home_top_left_body gather_home_top_body" v-if="dataArr['chengliEmployment']">
              <el-image v-for="(item, index) in dataArr['chengliEmployment'].slice(0, 2)" :key="item.id" class="img_box"
                        :src="'https://' + item.image" :preview-src-list="getImageList('chengliEmployment', 3)"
                        :initial-index="index" fit="cover"/>
            </div>
          </div>
        </div>
        <div class="gather_home_bottom_right_box">
          <card-header :title="'塍里大集市'" :path="'screen/card_header3.png'"></card-header>
          <div class="card-body">
            <el-carousel indicator-position="none" arrow="never" :interval="6000">
              <el-carousel-item v-for="(item,index) in dataArr['chengliMarket']" :key="index+'_key'">
                <div class="flex_box">
                  <div class="my_carousel_item" v-for="ite in item" :key="ite.id">
                    <div class="my_carousel_item_box">
                      <el-image class="img_box" :src="'https://'+ite.image"
                                :preview-src-list="['https://'+ite.image]" preview-teleported fit="cover"/>
                    </div>
                    <div class="per_name">{{ ite.title }}</div>
                    <div class="per_name2">
                      <span class="title">{{ ite.description }}</span>
                    </div>
                    <div class="per_name2" v-if="ite.address">
                      <span class="title">地址：{{ ite.address }}</span>
                    </div>
                    <!--                    <div class="per_name2">-->
                    <!--                      <span class="name">联系方式：</span>-->
                    <!--                      <span class="title">139456789</span>-->
                    <!--                    </div>-->
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </div>
    </div>
    <show-dialog ref="showDialogRef"></show-dialog>
  </div>
</template>

<style scoped lang="less">
.max_screen_body {
  flex-direction: column;

  .gather_home_top_box {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 2.5vh;

    .gather_home_top_body {
      width: 48.5vw;
      height: 40.3vh;
      overflow: auto;
      padding: 2vh 2.1vw;
      background: #112a38;
      display: flex;
      align-items: center;
    }

    .el-carousel {
      height: 100%;
      width: 100%;

      :deep(.el-carousel__container) {
        height: 100%;
      }
    }

    .imageBox {
      border: 0.1vw solid #1aa6f2;
      width: 44.2vw;
      height: 33.5vh;
      margin: 0 auto;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .img_desc {
      font-weight: 500;
      color: #ffffff;
      font-size: 1vw;
      margin-top: 0.5vh;
      text-align: center;
    }

  }

  .gather_home_top_left_body {
    display: flex;
    justify-content: space-around;

    .img_box {
      width: 13.7vw;
      height: 35vh;
    }
  }

  .gather_home_top_right_body {
    display: flex;
    padding-left: 1.5vw !important;
  }

  .div_left {
    width: 25vw;
    height: 100%;
    margin-right: 1vw;
  }

  .div_right {
    height: 100%;
    overflow: auto;
    flex: 1;
    color: #FFFFFF;
    line-height: 1.6;
    font-size: 1vw;

    :deep(p) {
      span {
        font-size: 0.8vw !important;
        line-height: 1.6 !important;
      }

      line-height: 1.6 !important;
      font-size: 0.8vw !important;
    }
  }

  .gather_home_bottom_box {
    display: flex;
    justify-content: space-between;
    width: 100%;

    .card-body {
      width: 31.9vw;
      height: 40.3vh;
      background: #112a38;
      padding: 2vh 1vw;
      overflow: auto;
      text-align: center;
    }
  }

  .gather_home_top_center_box {
  }

  .gather_home_bottom_right_box {
    .flex_box {
      display: flex;
      width: 100%;
      height: 100%;
      justify-content: space-between;
    }

    .my_carousel_item {
      color: #ffffff;
      font-weight: 500;
      font-size: 0;

      .my_carousel_item_box {
        border: 0.1vw solid #1aa6f2;
        width: 14.5vw;
        height: 29vh;
      }

      .img_box {
        width: 100%;
        height: 100%;
      }

      .per_name {
        font-size: 0.8vw;
        margin-top: 0.9vh;
      }

      .per_name2 {
        font-size: 0.7vw;
        margin-top: 0.1vh;

        .name {
          opacity: 0.6;
        }
      }
    }
  }
}
</style>
